(function ($w, $d) {
    let body = $d.body
    let m = {}
    /**
     * 使用html新建一个dom元素
     * @param {html} h 元素html字符串
     * @returns 
     */
    m.newElm = (h) => {
        var o = document.createElement("a") // 创建一个元素容器
        o.innerHTML = h // 设定元素的innerHtml
        return o.firstChild // 返回容器元素的第一个子元素
    }
    /**
     * 控制元素淡入显示
     * @param {element} e 需要淡入的元素
     * @param {callback} f 元素显示后执行的回调函数
     */
    m.fadeIn = (e, f) => {
        e.style.opacity = 0 // 初始隐藏
        body.appendChild(e) // 添加元素到body
        let v = 0, t = setInterval(o => { // 初始化透明度和定时器
            v += 20 // 透明度+0.2
            e.style.opacity = v / 100 // 设定透明度
            if (v >= 100) { // 如果元素已经完全显示
                clearInterval(t) // 移除定时器
                if (f) f() // 如果存在回调则执行回调
            }
        }, 33)
    }
    /**
     * 控制元素淡出显示
     * @param {element} e 需要淡出的元素
     * @param {callback} f 元素隐藏后执行的回调函数
     */
    m.fadeOut = (e, f) => {
        e.style.opacity = 1 // 初始显示
        let v = 100, t = setInterval(o => { // 初始化透明度和定时器
            v -= 20 // 透明度-0.2
            e.style.opacity = v / 100 // 设定透明度
            if (v <= 0) { // 如果元素已经完全显示
                clearInterval(t) // 移除定时器
                body.removeChild(e) // 移除元素
                if (f) f() // 如果存在回调则执行回调
            }
        }, 33)
    }
    /**
     * 生成一个随机数字
     * @returns 数字结果
     */
    m.newId = () => {
        return 'm' + (Math.random() * 1000000).toFixed(0)
    }
    /**
     * 弹出一个消息框显示内容
     * @param {content} c 提示内容 
     * @param {time} t 显示时间
     */
    m.msg = (c, t) => {
        if (!t) t = 2000 // 设定默认时间
        let h = m.newElm(`<div class="alay-info">${c}</div>`)
        m.fadeIn(h, o => {
            setTimeout(o => {
                m.fadeOut(h)
            }, t)
        })
    }
    /**
     * 弹出一个消息提示框
     * @param {content} c 消息内容
     * @param {callback} f 回调函数，如果点击确定参数将会返回true，其他方式关闭返回false
     * @param {title} t 消息标题
     */
    m.alert = (c, f, t) => {
        if (!t) t = '消息'
        let i = m.newId() // 生成新ID
        let h = m.newElm(`<div id="${i}" class="alay-container"><div class="alay-panel"><div class="alay-title">${t}<label onclick="alay.close('${i}',false)">×</label></div><div class="alay-content">${c}</div><div class="alay-btns"><input type="button" class="alay-btn-ok" onclick="alay.close('${i}',true)" value="确定"></div></div></div></div></div>`)
        m.fadeIn(h)
        m.fc = f
    }
    /**
     * 弹出加载动画
     * @param {content} c 加载提示内容，默认“加载中”
     * @returns 元素ID，用于调用close函数隐藏
     */
    m.loading = c => {
        if (!c) c = '加载中' // 设定默认加载文本
        let i = m.newId() // 生成新ID
        let h = m.newElm(`<div id="${i}" class="alay-container"><div class="alay-loading"><div class="alay-icon"></div>${c}</div></div>`)
        m.fadeIn(h) // 淡入元素
        return i // 返回ID，用于关闭
    }
    /**
     * 将一个元素淡出隐藏并移除
     * @param {elementid} i 元素ID 
     */
    m.close = (i, t) => {
        let h = document.querySelector('#' + i) // 获取元素
        m.fadeOut(h) // 淡出移除元素
        if (m.fc) { // 如果存在回调函数则执行
            m.fc(t)
            m.fc = 0
        }
    }
    /**
     * 弹出一个确认消息框
     * @param {content} c 消息内容
     * @param {callback} f 回调函数，如果点击确定参数将会返回true，其他方式关闭返回false
     * @param {title} t 消息标题
     */
    m.confirm = (c, f, t) => {
        if (!t) t = '消息'
        let i = m.newId() // 生成新ID
        let h = m.newElm(`<div id="${i}" class="alay-container"><div class="alay-panel"><div class="alay-title">${t}<label onclick="alay.close('${i}',false)">×</label></div><div class="alay-content">${c}</div><div class="alay-btns"><input type="button" class="alay-btn-cancel" onclick="alay.close('${i}',false)" value="取消"><input type="button" class="alay-btn-ok" onclick="alay.close('${i}',true)" value="确定"></div></div></div></div></div>`)
        m.fadeIn(h)
        m.fc = f
    }

    $w.alay = m
})(window, document)